<%--
  Created by IntelliJ IDEA.
  User: lingshao
  Date: 2020/9/19
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程练习</title>
    <script type="text/html" id="barDemo">
        <a href="javascript:;" style="margin-top: 10px;" class="layui-btn layui-btn-sm layui-btn-radius layui-btn layui-icon layui-icon-edit" lay-event="into">进入练习</a>
    </script>

    <%--    引入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <link rel="stylesheet" href="../layui/layui/css/layui.css" media="all">
    <script src="../layer/layer/layer.js"></script>

    <script src="../layui/layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height: 50px;
            width: 50px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

</head>
<body style="overflow-y:hidden" >

<blockquote class="layui-elem-quote news_search">

    <%--展示表格--%>
    <table id="demo" lay-filter="test"></table>
</blockquote>

<div id="main" style="display: none;">
    <form class="layui-form" lay-filter="test" >
        <div class="layui-form-item" style="margin-left: 60px;margin-top: 30px">
            <label class="layui-form-label" style="margin-left: 40px">练习模式</label>
            <div class="layui-input-inline">
                <select id="lx" lay-verify="lianxi" name="lx">
                    <option value="S">顺序练习</option>
                    <option value="B">随机练习</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-top: 30px;margin-left: 80px">
                <button id="ensure" class="layui-btn" lay-submit lay-filter="tests">确定</button>
                <button type="button" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var form=layui.form;
        var $=layui.$;



        //定义一个编号，便于后期关闭div对话框
        var closeDiv;
        //第一个实例，渲染表格
        table.render({
            elem: '#demo'
            ,toolbar:"#demoTableId"
            ,height:560
            ,cellMinWidth: 160
            ,url: '../FindCourse?method=findCourse' //数据接口
            , limits: [5,10,15,20]  //一页选择显示3,5或10条数据
            , limit: 5  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,cols: [[ //表头
                {field: 'courseId', title: '课程编号', align: 'center', fixed: 'left'}
                ,{field: 'courseName', title: '课程名称', align: 'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
            ]]
            ,page:true
        });
        //课程编号
        var courseId;
        //点击按钮进入课程练习事件
        table.on("tool(test)",function(e){
            courseId=e.data.courseId;
            layer.open({
                type: 1,
                title:'请选择',
                area: ['300px', '250px'],
                shade: 0.3,
                anim:2,
                content: $("#main").html(),
                success: function(){
                    // 重新渲染弹层中的下拉选择框select
                    form.render('select','test');
                }
            });
        });

        form.on("submit(tests)",function(data){
            //拿到jQuery元素
            var elem=$("#ensure").text();
            //判断点击的按钮是确定
            if (elem=="确定"){
                $.ajax({
                    url:"../CourseSubjectServlet?method=saveCourseMsg",
                    type:"POST",
                    data:"courseId="+courseId+"&practiceType="+data.field.lx,
                    success:function(data){
                        if (data="ok"){
                            top.location.href="BackCurriculum.jsp";
                        }else{

                        }
                    }
                });
            }else if (elem=="取消"){
                top.location.href="ForeCoure.jsp";
            }
        });

    });


</script>
</body>
</html>

